<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="utf-8" />
    <title>cfilebrowser widget</title>
    <style type="text/css">
    body {
 margin: 0;
 padding: 0;
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 14px;
 color: #333;
 background-color: #fff;
}

a {
 color: #0134c5;
 background-color: transparent;
 text-decoration: none;
 font-weight: normal;
 outline-style: none;
}
a:visited {
 color: #0134c5;
 background-color: transparent;
 text-decoration: none;
 outline-style: none;
}
a:hover {
 color: #000;
 text-decoration: none;
 background-color: transparent;
 outline-style: none;
}

#breadcrumb {
 float: left;
 background-color: transparent;
 margin: 10px 0 0 42px;
 padding: 0;
 font-size: 10px;
 color: #666;
}
#breadcrumb_right {
 float: right;
 width: 175px;
 background-color: transparent;
 padding: 8px 8px 3px 0;
 text-align: right;
 font-size: 10px;
 color: #666;
}
#nav {
 background-color: #494949;
 margin: 0;
 padding: 0;
}
#nav2 {
 background: #fff url(images/nav_bg_darker.jpg) repeat-x left top;
 padding: 0 310px 0 0;
 margin: 0;
 text-align: right;
}
#nav_inner {
 background-color: transparent;
 padding: 8px 12px 0 20px;
 margin: 0;
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 11px;
}

#nav_inner h3 {
 font-size: 12px;
 color: #fff;
 margin: 0;
 padding: 0;
}

#nav_inner .td_sep {
 background: transparent url(images/nav_separator_darker.jpg) repeat-y left top;
 width: 25%;
 padding: 0 0 0 20px;
}
#nav_inner .td {
 width: 25%;
}
#nav_inner p {
 color: #eee;
 background-color: transparent;
 padding:0;
 margin: 0 0 10px 0;
}
#nav_inner ul {
 list-style-image: url(images/arrow.gif);
 padding: 0 0 0 18px;
 margin: 8px 0 12px 0;
}
#nav_inner li {
 padding: 0;
 margin: 0 0 4px 0;
}

#nav_inner a {
 color: #eee;
 background-color: transparent;
 text-decoration: none;
 font-weight: normal;
 outline-style: none;
}

#nav_inner a:visited {
 color: #eee;
 background-color: transparent;
 text-decoration: none;
 outline-style: none;
}

#nav_inner a:hover {
 color: #ccc;
 text-decoration: none;
 background-color: transparent;
 outline-style: none;
}

#masthead {
 margin: 0 40px 0 35px;
 padding: 0 0 0 6px;
 border-bottom: 1px solid #999;
}

#masthead h1 {
background-color: transparent;
color: #e13300;
font-size: 18px;
font-weight: normal;
margin: 0;
padding: 0 0 6px 0;
}

#searchbox {
 background-color: transparent;
 padding: 6px 40px 0 0;
 text-align: right;
 font-size: 10px;
 color: #666;
}

#img_welcome {
 border-bottom: 1px solid #D0D0D0;
 margin: 0 40px 0 40px;
 padding: 0;
 text-align: center;
}

#content {
 margin: 20px 40px 0 40px;
 padding: 0;
}

#content p {
 margin: 12px 20px 12px 0;
}

#content h1 {
color: #e13288;
border-bottom: 1px solid #666;
background-color: transparent;
font-weight: normal;
font-size: 24px;
margin: 0 0 20px 0;
padding: 3px 0 7px 3px;
}

#content h2 {
 background-color: transparent;
 border-bottom: 1px solid #999;
 color: #009ee0;
 font-size: 18px;
 font-weight: bold;
 margin: 28px 0 16px 0;
 padding: 5px 0 6px 0;
}

#content h3 {
 background-color: transparent;
 color: #333;
 font-size: 16px;
 font-weight: bold;
 margin: 16px 0 15px 0;
 padding: 0 0 0 0;
}

#content h4 {
 background-color: transparent;
 color: #444;
 font-size: 14px;
 font-weight: bold;
 margin: 22px 0 0 0;
 padding: 0 0 0 0;
}

#content img {
 margin: auto;
 padding: 0;
}

#content code {
 font-family: Monaco, Verdana, Sans-serif;
 font-size: 12px;
 background-color: #f9f9f9;
 border: 1px solid #D0D0D0;
 color: #002166;
 display: block;
 margin: 14px 0 14px 0;
 padding: 12px 10px 12px 10px;
}

#content pre {
 font-family: Monaco, Verdana, Sans-serif;
 font-size: 12px;
 background-color: #f9f9f9;
 border: 1px solid #D0D0D0;
 color: #002166;
 display: block;
 margin: 14px 0 14px 0;
 padding: 12px 10px 12px 10px;
}

#content .path {
 background-color: #EBF3EC;
 border: 1px solid #99BC99;
 color: #005702;
 text-align: center;
 margin: 0 0 14px 0;
 padding: 5px 10px 5px 8px;
}

#content dfn {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #00620C;
 font-weight: bold;
 font-style: normal;
}
#content var {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #8F5B00;
 font-weight: bold;
 font-style: normal;
}
#content samp {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #480091;
 font-weight: bold;
 font-style: normal;
}
#content kbd {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #A70000;
 font-weight: bold;
 font-style: normal;
}

#content ul {
 list-style-image: url(images/arrow.gif);
 margin: 10px 0 12px 0;
}

#content li {
 margin-bottom: 9px;
}

#content li p {
 margin-left: 0;
 margin-right: 0;
}

#content .tableborder {
 border: 1px solid #999;
}
#content th {
 font-weight: bold;
 text-align: left;
 font-size: 12px;
 background-color: #666;
 color: #fff;
 padding: 4px;
}

#content .td {
 font-weight: normal;
 font-size: 12px;
 padding: 6px;
 background-color: #f3f3f3;
}

#content .tdpackage {
 font-weight: normal;
 font-size: 12px;
}

#content .important {
 background: #FBE6F2;
 border: 1px solid #D893A1;
 color: #333;
 margin: 10px 0 5px 0;
 padding: 10px;
}

#content .important p {
 margin: 6px 0 8px 0;
 padding: 0;
}

#content .important .leftpad {
 margin: 6px 0 8px 0;
 padding-left: 20px;
}

#content .critical {
 background: #FBE6F2;
 border: 1px solid #E68F8F;
 color: #333;
 margin: 10px 0 5px 0;
 padding: 10px;
}

#content .critical p {
 margin: 5px 0 6px 0;
 padding: 0;
}


#footer {
background-color: transparent;
font-size: 10px;
padding: 16px 0 15px 0;
margin: 20px 0 0 0;
text-align: center;
}

#footer p {
 font-size: 10px;
 color: #999;
 text-align: center;
}
#footer address {
 font-style: normal;
}

.center {
 text-align: center;
}

img {
 padding:0;
 border: 0;
 margin: 0;
}

.nopad {
 padding:0;
 border: 0;
 margin: 0;
}


form {
 margin: 0;
 padding: 0;
}

.input {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 11px;
 color: #333;
 border: 1px solid #B3B4BD;
 width: 100%;
 font-size: 11px;
 height: 1.5em;
 padding: 0;
 margin: 0;
}

.textarea {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 14px;
 color: #143270;
 background-color: #f9f9f9;
 border: 1px solid #B3B4BD;
 width: 100%;
 padding: 6px;
 margin: 0;
}

.select {
 background-color: #fff;
 font-size:  11px;
 font-weight: normal;
 color: #333;
 padding: 0;
 margin: 0 0 3px 0;
}

.checkbox {
 background-color: transparent;
 padding: 0;
 border: 0;
}

.submit {
 background-color: #000;
 color: #fff;
 font-weight: normal;
 font-size: 10px;
 border: 1px solid #fff;
 margin: 0;
 padding: 1px 5px 2px 5px;
}    </style>
</head>
<body>
    <div id="content">
        <h1>CFileBrowserWidget</h1>
 
<p>This is a widget that will render a file browser on the page</p>

<p><img src="assets/images/thumbnail.png" alt="thumbnail" /></p>

<h2>Installation and Usage</h2>

<h4>The Controller Action</h4>
<p>The widget relises on a 'connector' that gets called via AJAX requests to display a folders contents. You can cut and paste the code in <strong>ControllerActionSample.php</strong> into the controller of your choice.</p>

<h4>The widget</h4>
<p>Place all the widget file in the extensions folder of your application and call the widget in your page like this:</p>
 
<code>
$this->widget('application.extensions.cfilebrowser.CFileBrowserWidget',array(<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'script'=>array('site/filebrowser'),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'root'=>'/var/',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'folderEvent'=>'click',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'expandSpeed'=>1000,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'collapseSpeed'=>1000,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'expandEasing'=>'easeOutBounce',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'collapseEasing'=>'easeOutBounce',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'multiFolder'=>true,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'loadMessage'=>'File Browser Is Loading...hang on a sec',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'callbackFunction'=>'alert("I selected " + f)'<br />
));
</code>

<p>This will then render the following code in your file</p>
<code>
&lt;div id="filebrowser"&gt;&lt;/div&gt;<br />
<br /><br />
&lt;script type="text/javascript"&gt;<br />
//&lt;![CDATA[<br />
jQuery(document).ready(function() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery('#filebrowser').fileTree({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;root:'/var/',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script:'/index.php?r=site/filebrowser',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;folderEvent:'click',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expandSpeed:1000,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapseSpeed:1000,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiFolder:true,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loadMessage:'File Browser Is Loading...hang on a sec',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expandEasing:'easeOutBounce',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapseEasing:'easeOutBounce'<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, function(f){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("I selected " + f);<br />		
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
});<br />
//]]>><br />
&lt;/script&gt;
</code>

<h2>Widget Options</h2>
<ul>
  <li><strong>script</strong> - (required) The connector. You must specify as an array e.g. 'array("site/filebrowser")'</li>
  <li><strong>root</strong> -  The location to start from (default:  '/')</li>
  <li><strong>folderEvent</strong> - The event to expand a folder (default: 'click')</li>
  <li><strong>expandSpeed</strong> - Time in miliseconds (default: 500)</li>
  <li><strong>collapseSpeed</strong> - Time in miliseconds (default: 500)</li>
  <li><strong>callbackMethod</strong> - Where 'f' is the file selected</li>
  <li><strong>expandEasing</strong> - (optional)The easing method</li>
  <li><strong>collapseEasing</strong> - (optional) The easing method</li>
  <li><strong>loadMessage</strong> - (optional) Specify your own message</li>
  <li><strong>containerID</strong> - (optional) Specify your own div id (default: 'filebrowser')</li>
  <li><strong>cssFile</strong> - (optional) Specify your own CSS file or set as false for none</li>
</ul>
</div>

<div id="footer">
<p>Project page: <a href="http://code.google.com/p/cfilebrowser/">http://code.google.com/p/cfilebrowser/</a> | Copyright &copy; 2010 <a href="mailto:kbradwick@gmail.com?subject=cfilebrowser widget">Kevin Bradwick</a></p>
</div>

</body>
</html>